import { JsonPipe } from '@angular/common';
import { Component, Inject } from '@angular/core';
import { InfoService } from './info.service';
import { AbsInfoService } from './interface';
import { TITLE } from './token';

@Component({
  selector: 'app-info-demo',
  standalone: true,
  imports: [JsonPipe],
  template: `
    <h1 class="text-lg font-semibold">{{ title }}</h1>
    <p>
      Info: <code>{{ info }}</code>
    </p>
    <p>
      Info2: <code>{{ info2 | json }}</code>
    </p>
    <p>
      Is same instance? -
      <code>{{ isSameInstance }}</code>
    </p>
  `,
  styles: `
    code {
      @apply underline decoration-2 decoration-indigo-500;
    }
  `,
})
export class InfoDemoComponent {
  info: string;
  info2: string[];
  isSameInstance: boolean;

  constructor(
    @Inject(TITLE) public title: string,
    private service: InfoService,
    @Inject(AbsInfoService)
    private service2: AbsInfoService[]
  ) {
    this.info = this.service.inform();
    this.info2 = this.service2.map((s) => s.inform());
    this.isSameInstance = this.service === this.service2[0];
  }
}

export default InfoDemoComponent;
